import React, { useState } from 'react'
import { View, Text, ScrollView, StyleSheet } from 'react-native';
import { Switch, RadioGroup, Radio,Icon } from '../../components';
import BaseView from '../components/base-view'
const Radios = () => {
  const [checked1, setChecked1] = useState("1")
  const options = [
    {
      label:"单选1",
      value:"1",
    },
    {
      label:"单选2",
      value:"2",
    }
  ]
  return (
    <ScrollView style={{ backgroundColor: '#f2f2f2', flex: 1, width: '100%', height: '100%' }}>
      <BaseView title="基础用法">
        <RadioGroup checked={checked1} onChange={setChecked1}>
          <Radio value="1">单选1</Radio>
          <Radio value="2">单选2</Radio>
        </RadioGroup>
      </BaseView>
      <BaseView title="水平排列">
        <RadioGroup style={{ flexDirection: "row" }} checked={checked1} onChange={setChecked1}>
          <Radio value="1">单选1</Radio>
          <Radio value="2">单选2</Radio>
        </RadioGroup>
      </BaseView>
      <BaseView title="禁用状态">
        <RadioGroup disabled={true} checked={checked1} onChange={setChecked1}>
          <Radio value="1">单选1</Radio>
          <Radio value="2">单选2</Radio>
        </RadioGroup>
      </BaseView>
      <BaseView title="自定义颜色">
        <RadioGroup checked={checked1} checkedColor="#fed71a" onChange={setChecked1}>
          <Radio value="1">单选1</Radio>
          <Radio value="2">单选2</Radio>
        </RadioGroup>
      </BaseView>
      <BaseView title="自定义大小">
        <RadioGroup checked={checked1} iconSize={30} onChange={setChecked1}>
          <Radio value="1">单选1</Radio>
          <Radio value="2">单选2</Radio>
        </RadioGroup>
      </BaseView>
      <BaseView title="自定义图标">
        <RadioGroup checked={checked1} onChange={setChecked1} activeIcon={<Icon name="infocirlce" size={20} color="#f2481b"></Icon>} inactiveIcon={<Icon name="infocirlceo" size={20} color="#333"></Icon>}>
          <Radio value="1">单选1</Radio>
          <Radio value="2">单选2</Radio>
        </RadioGroup>
      </BaseView>
      <BaseView title="options渲染选项">
        <RadioGroup options={options} checked={checked1}   onChange={setChecked1}>
        </RadioGroup>
      </BaseView>
    </ScrollView>
  )
}

export default Radios